//个人认证填写表单

import React, { useState } from 'react';
import { Button, Form, Input, Row, Col, message } from 'antd';
import { authentication } from '../../service';
import styles from './PersonageFrom.module.less';
import { useNavigate } from 'react-router-dom';

export default ({ OpenZfbModal, imgCode, getCode, disableSwitch }) => {

    const [form] = Form.useForm();
    const [loading, setLoading] = useState(false)
		const navigate = useNavigate();
    const layout = {
        labelCol: {
            span: 5,
        },
        wrapperCol: {
            span: 14,
        },
    };

    //通过校验事件
    function onFinish() {
        form.validateFields().then(async (val) => {
            if (val.alipayAccount !== val.repeatAccount) {
                message.error('两次输入的支付宝账号不一致')
                return
            }
            setLoading(true)
            val.key = imgCode.key
            val.type = 0
            const res = await authentication(val)
            if (res.code == 200) {
                OpenZfbModal()
                setLoading(false)
            } else {
                setLoading(false)
            }
        }).catch(err => {

        })
    }

    //刷新验证码
    function refreshCode() {
        getCode();
    }

    //没有通过校验
    function onFinishFailed() {

    }

    //返回事件
    function back() {
				navigate(-1);
    }

    return (
        <div className={styles.formBox}>
            <Form
                {...layout}
                name="personage"
                initialValues={{
                    remember: true,
                }}
                form={form}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
                <Form.Item
                    label="支付宝"
                    name="alipayAccount"
                    rules={[
                        {
                            required: true,
                            message: '请输入支付宝账号!',
                        },
                    ]}
                >
                    <Input disabled={disableSwitch} />
                </Form.Item>

                <Form.Item
                    label="确认支付宝"
                    name="repeatAccount"
                    rules={[
                        {
                            required: true,
                            message: '请再次输入支付宝账号!',
                        },
                    ]}
                >
                    <Input disabled={disableSwitch} />
                </Form.Item>

                <Form.Item
                    label="姓名"
                    name="realName"
                    rules={[
                        {
                            required: true,
                            message: '请输入姓名!',
                        },
                    ]}
                >
                    <Input disabled={disableSwitch} />
                </Form.Item>

                <Form.Item
                    label="图形验证"
                    name="code"
                    rules={[
                        {
                            required: true,
                            message: '请输入正确的验证码!',
                        },
                    ]}>
                    <Row gutter={8}>
                        <Col span={12}>
                            {/* <Form.Item
                                name="code"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入正确的验证码!',
                                    },
                                ]}
                            > */}
                            <Input disabled={disableSwitch} />
                            {/* </Form.Item> */}
                        </Col>
                        <Col span={12}>
                            <img className={styles.imgCode} src={imgCode.src} onClick={refreshCode} />
                        </Col>
                    </Row>
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 5 }}>
                    <Button loading={loading} type="primary" htmlType="submit" disabled={disableSwitch}>
                        开始绑定
                    </Button>
                    <Button style={{ marginLeft: '20px' }} onClick={back}>
                        返回
                    </Button>
                </Form.Item>

            </Form>
        </div>
    )
}